<template>
    <div>
        <Headers>
            <template v-slot:title>
            <span>订单</span>
            </template>
        </Headers>
        <van-tabs v-model="active" @click="onClick">
  <van-tab title="全部订单">
     <dl>
            <dd v-for="ite in list" :key="ite.id">
            <p>订单编号：{{ite.order_number}}</p>
                <p style="fontSize:0.5rem;margin:0rem">{{ite.title}}</p>
                
                <p>时间：
                    {{ite.created_at|timers}}
                   </p>
                <p>实际付款：{{ite.order_status}}</p>
            </dd>
        </dl>
  </van-tab>
  <van-tab title="待支付"> 
    <dl>
            <dd v-for="ite in list1" :key="ite.id">
            <p>订单编号：{{ite.order_number}}</p>
                <p style="fontSize:0.5rem;margin:0rem">{{ite.title}}</p>
                
                <p>时间：
                    {{ite.created_at|timers}}
                   </p>
                <p>实际付款：{{ite.order_status}}</p>
            </dd>
        </dl></van-tab>
  <van-tab title="已完成">
     <dl>
            <dd v-for="ite in list2" :key="ite.id">
            <p>订单编号：{{ite.order_number}}</p>
                <p style="fontSize:0.5rem;margin:0rem">{{ite.title}}</p>
                
                <p>时间：
                    {{ite.created_at|timers}}
                   </p>
                <p>实际付款：{{ite.order_status}}</p>
            </dd>
        </dl>
  </van-tab>
  <van-tab title="已取消">
    
  </van-tab>
</van-tabs>
    </div>
</template>

<script>
import Headers from '../Main/header'
import { myOrder } from "../../Request/http";
export default {
    components:{Headers},
    name: 'EverydayOrder',

    data() {
        return {
            active:0,
            list:[],
            list1:[],
            list2:[]
        };
    },

    mounted() {
        this.all()
    },

    methods: {
        all(){
            myOrder({order_type:2,order_status:0}).then(res=>{
                console.log(res);
                this.list=res.list
                console.log(this.active);
            })
        },
         one(){
            myOrder({order_type:2,order_status:1}).then(res=>{
                console.log(res);
                this.list1=res.list
                console.log(this.active);
            })
           
        },
         two(){
            myOrder({order_type:2,order_status:2}).then(res=>{
                console.log(res);
                this.list2=res.list
                console.log(this.active);
            })
           
        },
         onClick(name, title) {
 console.log(name,title);
if(name==0){
    this.all()
}else if(name==1){
    this.one()
}else if(name==2){
    this.two()
}
    },
    },
};
</script>

<style lang="scss" scoped>
dl {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
  dd {
    margin: 0rem;
    padding: 0.5rem;
    position: relative;
    color: #323233;
    font-size: 0.373rem;
    line-height: 0.64rem;
    background-color: #fff;
    border-bottom: 0.373rem solid rgb(242, 243, 245);
    div {
      height: 1rem;
      line-height: 1rem;
      display: flex;
      img {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
      }
      p {
        margin-top: 0rem;
      }
    }
    .ite-bot {
      margin: 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
}
</style>